<template>
	<view class="container">
		<view class="status_bar"></view>
		<!--头部-->
		<view  class="head flex-row" @tap="closeSwipe" :style="{'padding-right': posRight}">
			<view class="title">消息</view>
			<view @tap="toPage('/pages/message/group/create')">创建群聊</view>
		</view>
		<!--容器-->
		<scroll-view scroll-y class="list">
			<view class="space" @tap="closeSwipe"></view>
			<uni-swipe-action ref="swipe">
				<uni-swipe-action-item v-for="(item, index) in messageCounter" :key="index">
					<view class="item flex-row" @tap="toDetail(item)">
						<view class="cover flex-row flex-column">
							<image :src="item.targetAvatar" class="icon"></image>
							<!--<view v-if="item.unReadNumebr" class="tag empty flex-row flex-column"></view>-->
						</view>
						<view class="title">
							<view class="main flex-row">
								<text class="text" v-text="item.targetNickname"/>
								<text class="time" v-text="formatterDate(item.sendTimestamp)"/>
							</view>
							<view class="sub text-ellipsis" v-text="formatterMsg(item.mediaType,item.message)"/>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</scroll-view>
	</view>
</template>

<script>
	import {command} from "@/websocket/ws_const";
	import {mapGetters} from 'vuex'
	import {timestampDateFormat} from "@/common";
	import message from "@/api/message";

	export default {
		data() {
			return {
				mediaMsgType: this.$msgConst.mediaMsgType,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#f9828a'
						}
					}
				],
				posRight: '15px',
				userId: uni.getStorageSync('userId') || '',
				list: []
			}
		},
		computed: {
			...mapGetters({
				messageCounter: 'message/messageCounter'
			})
		},
		onShow() {

		},
		onLoad() {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.posRight = (menuButtonInfo.width + 20) + 'px';
			// #endif
			//监听socket登录响应
			this.onLoginRespMsg();
		},
		methods: {
			formatterDate(timestamp){
				return timestampDateFormat(timestamp, "Y年m月d日 H时i分");
			},
			// 处理消息类型
			formatterMsg(mediaType = this.mediaMsgType.TXT.key, content = '') {
				let ret = content;
				switch (mediaType) {
					case this.mediaMsgType.VOICE.key:
						ret = '语音消息';
						break;
					case this.mediaMsgType.PIC.key:
						ret = '图片';
						break;
					default:
						ret = content
				}
				return ret
			},
			//获取离线消息计数器
			getOfflineMsgCounterReq(){
				let that = this;
				message.getOfflineMsgCounter()
						.then(res => {
							//存储消息
							that.$store.commit(this.$vuexConst.CHAT_STATE_PREFIX + this.$vuexConst.UPDATE_OFFLINE_MSG_COUNTER, res.data);
							//拉取成功后删除计数器
							message.delOfflineMsgCounter();
						})
						.catch(res => {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						});
			},
			//登录响应监听
			onLoginRespMsg() {
				let that = this;
				uni.$on('message_handle_' + command.AUTH.key, (data) => {
					//更新routingKey
					that.$store.commit(this.$vuexConst.USER_STATE_PREFIX + this.$vuexConst.UPDATE_ROUTING_KEY, data.routingKey);
					that.getOfflineMsgCounterReq();
				});
			},
			// 关闭滑块
			closeSwipe() {
				this.$refs.swipe.closeOther()
			},
			// 详情
			toDetail(item) {
				// 判断是群聊还是单聊
				if (item.type == 'group') {
					uni.setStorageSync('groupName', item.groupName || '群聊' + item.groupId)
					this.toPage('/pages/message/group/detail?groupId=' + item.groupId)
				} else {
					let {fromUserId, toUserId, telephone} = item
					let userId = toUserId == this.userId ? fromUserId : toUserId
					this.toPage('/pages/message/chat/index?toUserId=' + userId + '&toUserName=' + telephone)
				}
			},
			// 切换
			swipeChange() {
			}
		}
}
</script>

<style lang="scss" scoped>
.list{
	height: calc(100vh - 100upx - var(--status-bar-height));

	.item{
		width: 100vw;
		height: 160upx;
		padding: 30upx;
		box-sizing: border-box;
		align-items: flex-start;

		.cover{
			width: 100upx;
			height: 100upx;
			border-radius: 10upx;
			box-sizing: border-box;
			border: 2upx solid #f9f9f9;
			position: relative;

			.icon{
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}

			.tag{
				color: #fff;
				width: 30upx;
				height: 30upx;
				font-size: 20upx;
				border-radius: 50%;
				background-color: red;
				position: absolute;
				top: -12upx;
				right: -12upx;
				z-index: 9;

				&.empty{
					width: 20upx;
					height: 20upx;
					background-color: #F72727;
					top: -6upx;
					right: -6upx;
				}
			}
		}

		.title{
			height: 100%;
			box-sizing: border-box;
			width: calc(100vw - 130upx - 60upx);
			position: relative;

			&::after{
				content: '';
				width: 100%;
				height: 2upx;
				background-color: #F6F6F6;
				position: absolute;
				left: 0;
				bottom: -30upx;
			}

			.main{
				height: 40upx;
				margin: 6upx 0 12upx;

				.text{
					color: #333;
					font-size: 32upx;
					font-weight: 600;
				}

				.time{
					color: #666;
					font-size: 24upx;
				}
			}

			.sub{
				color: #999;
				font-size: 24upx;
			}
		}
	}
}
</style>
